<template>
    <ContentBox title="直播电商">
        <div class="zhibo">
            <div class="header">
                累计直播销售额<span class="digiter-number" style="color:#18E7E7;">151</span>亿
            </div>
            <div class="content">
                <div>
                    <div class="digiter-number"><span class="digiter-number">1.4</span>万场</div>
                    <div>累计直播场次</div>
                </div>
                <div>
                    <div class="digiter-number"><span class="digiter-number">1.4</span>万次</div>
                    <div>累计观看人次</div>
                </div>
            </div>
        </div>
    </ContentBox>
</template>
<script>
    import ContentBox from "../../components/common/ContentBoxSmall"


    export default {
        name: "Preview",
        components: {
            ContentBox,

        }
    }
</script>

<style lang="scss" scoped>
    .zhibo {
        height: 100%;
        width: 100%;
        display: flex;
        flex-direction: column;
    }

    .header {
        font-size: 30px;
        text-align: center;
        margin-bottom: 20px;
    }

    .content {
        flex: 1;
        display: flex;
        > div {
            flex: 1;
            padding-bottom: 10px;
            &:first-child {
                background: url("../../assets/image/dianshangzuo.png") center no-repeat;
                background-size: 50%;

                display: flex;
                flex-direction: column;
                justify-content: space-between;
                > div {
                    font-size: 20px;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    &:first-child {
                        font-size: 40px;
                        color: #8F30FF;
                        span {
                            font-size: 40px;
                            color: #8F30FF;
                        }
                    }
                    &:last-child {
                        color: #8F30FF;

                    }

                }
            }
            &:last-child {
                background: url("../../assets/image/dianshangyou.png") center no-repeat;
                background-size: 50%;

                display: flex;
                flex-direction: column;
                justify-content: space-between;
                > div {
                    font-size: 20px;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    &:first-child {
                        font-size: 40px;
                        color: #D6055E;
                        span {
                            font-size: 40px;
                            color: #D6055E;
                        }
                    }
                    &:last-child {
                        color: #D6055E;

                    }
                }
            }
        }
    }
</style>
